<template>
  <div>
    <Searchbar>
      <el-input @change="getList" v-model="search.id" placeholder="请输入实验id"></el-input>
      <el-input @change="getList" v-model="search.experiment_name" placeholder="请输入实验名称"></el-input>

      <el-autocomplete
        class="inline-input"
        v-model="selectedKnowledge"
        :fetch-suggestions="queryKnowledge"
        placeholder="请输入关联知识点"
        @select="selectKnowledge"
      ></el-autocomplete>

      <el-button class="search-btn" @click="getList" type="primary">查询</el-button>
    </Searchbar>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="实验id"></el-table-column>

      <el-table-column prop="experiment_name" label="实验名称"></el-table-column>

      <el-table-column prop="knowledges" label="知识点列表"></el-table-column>

      <el-table-column prop="duration" label="实验时长"></el-table-column>

      <el-table-column prop="ending_time" label="结束时间"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="onShowDetail(scope.row)"
            size="small"
            class="text-button"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change=handleSizeChange
      :current-page.sync="search.page"
      :page-size="search.page_size"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import pageMixin from "@/mixins/pageMixin";
import { experimentModel, kldModel } from "@/api/admin_models";
import Searchbar from "@/components/Searchbar";
export default {
  mixins: [pageMixin],
  components: { Searchbar },
  data() {
    return {
      tableData: [],
      total: 0,
      search: {
        id: null,
        experiment_name: null,
        knowledge_id: null,
        page: 1,
        page_size: 10
      },
      selectedKnowledge: null,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onShowDetail(row) {
      this.$router.push('/experiment/' + row.id)
      console.log(row);
    },
    queryKnowledge(queryString, cb) {
      kldModel.search({
        keyword: queryString
      }, res => {
        let r = res.data.map(v => {
          return {
            id: v.id,
            value: v.knowledge_path
          }
        })
        cb(r)
      })
    },
    selectKnowledge(item) {
      this.selectedKnowledge = item.value
      this.search.knowledge_id = item.id
    },
    getList() {
      console.log("getList");
      experimentModel.list(
        this.search,
        res => {
          this.total = res.total_records;
          this.tableData = res.data.map(v => {
            return v;
          });
        },
        err => {
          console.log(err);
        }
      );
    }
  }
};
</script>
<style lang="scss">
.el-autocomplete-suggestion {
  width: auto !important;
}
.text-default span{
  color: orange;
}
</style>